<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>订单管理</title>
    <link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<!--
单页应用， 所有功能集成在当前页面
一般对数据的操作就是  增，删，改，查
1   打开该页时自动访问后端controller得到列表数据【查】
2   点击具体按钮时访问后端controller 执行操作【增，删，改】
3   利用DOM（不刷新页面修改页面局部内容）
4   利用异步网络请求ajax（不刷新页面在浏览器后台发送HTTP请求）
-->
<header class="container-fluid bg-primary text-white">
    <h2 class="offset-4 mt-3 mb-3 p-2">订单管理系统</h2>
</header>


<table class="table">
    <thead>
    <tr>
        <th>订单编号</th>
        <th>对应商家编号</th>
        <th>对应顾客编号</th>
        <th>总金额</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="order">
    <tr>
        <td>2000</td>
        <td>2</td>
        <td>1</td>
        <td>10</td>
        <td>
            <button class="btn-danger">delete</button>
        </td>
    </tr>
    </tbody>
</table>


<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>

<script>
    $(document).ready(function () {
        $.ajax({
            url: "xyxAdministrator/orderInfList",
            dataType: "json",
            success: function (ret) {
                console.log(ret);
                // $("#dis").text(ret.dataZone.orderInfList[0].oid)
                $("#order").empty();
                let ords = ret.dataZone.orderInfList;
                $.each(ords, function (index, item) {
                    var oTr = $("<tr></tr>");
                    var oidTd =$('<td></td>').text(item.oid);
                    var oCuTd =$('<td></td>').text(item.ocustomerid);
                    var oReTd =$('<td></td>').text(item.oresaurantid);
                    var oToTd =$('<td></td>').text(item.ototalvalue);
                    var delTd =$('<td></td>').html('<a class="btn-danger" href="xyxAdministrator/orderInfDelete?oid='+item.oid+'" >删除</a>');

                    oTr.append(oidTd).append(oCuTd).append(oReTd).append(oToTd).append(delTd);

                    $("#order").append(oTr);
                });
            },
            error: function (eno) {
                console.log(eno);
            }
        })
    })
</script>
</body>
</html>
